Claudeで3000行のCSVファイルをリアルタイムにグラフ化し分析する

「ClaudeのコンソールでJavaScriptが実行されてなんかヌルヌル動くグラフがでてきた」

先日のClaudeのアップデートで、CSVファイルの分析ツールがリリースされました。私はBIツール的なものには完全に疎いのですが、CSVファイルをアップロードするだけで、あとは自然言語を元にデータの分析とグラフ表示をリアルタイムで実現できる体験が非常に素晴らしかったので、その様子をお届けします。

Claude.aiのアップデート内容

https://www.anthropic.com/news/analysis-tool

Claude.aiの新しい組み込みでの分析ツール。JavaScriptの実行がClaude.aiの中で対応したため、インタラクティブでリアルタイムなデータ分析ができるようになったということです。

もともと、CSVやExcelを読み込んでのデータ分析自体は以前のClaudeでも対応していたと思うのですが、今回はグラフ描画をJavaScriptを利用しているため、動的に表現方法を変更できるグラフが作成されるのが、これまでと一番違うところかと思います。

実際にどんな感じで分析が実行できるかはこちらの動画が非常にわかりやすかったので、このブログでも参考にしています。ありがとうございます！

https://www.youtube.com/watch?v=4OUqat3Cxz0

分析ツールの使い方

2024年10月26日現在、分析ツールはFeature Previewなので、利用するためには明示的にオンにする必要があります。プロフィールアイコンから[Feature Preview]をクリックし、Analysis toolのトグルをOnにしましょう。

分析するCSVファイルを用意する

Claude.aiの設定はこれだけ。あとは分析に使うCSVファイルを用意します。自分でつくってももちろん良いですが、大量データをリアルタイムで分析する醍醐味を味わうために、既存のCSVデータを使いましょう。今回は米国の国立気象局（National Weather Service）が提供する、全米都市の気象情報を利用します。以下のサイトから、CSVファイルがダウンロードできます。

https://corgis-edu.github.io/corgis/csv/weather/

このファイルには、122都市の2016年の週間レベルでの気象情報が含まれています。含まれているデータの詳細は上のサイトを確認してみてください。ここで、事前にどんなデータが含まれているか確認しておくほうが、後ろの分析がはかどります（ですが、実際はCSVファイルを読み込ませた後にClaudeにCSVファイルの中身を聞くだけで、データの傾向はほとんど把握できます）。

含まれている情報は概ねこんな内容です。

• 年月日
• 都市コード
• 平均気温、最高気温、最低気温
• 風向、風速
• 降水量

Claudeのコンソールでファイルを読み込んでみる　→　データ量エラー

前段でダウンロードしたweather.csvファイルをClaudeのコンソールからAdd contentしてみたところ、以下のエラーが表示されました。

"Conversation is 297% over the length limit. Try replacing the attached file with smaller excerpts."

ファイルが大きすぎるとのことです。ダウンロードしたweather.csvは16744行あり、この場合297%オーバーしているとのこと。

仕方ないので、3000行までファイルを縮小し再度Add Contentしたところ、無事データ量制限に収まりました。

アップロードした気象情報CSVファイルをClaudeに分析してもらう

CSVファイルの情報の確認

最初にCSVファイルに含まれる情報を聞いてみます。これ自体は従来から可能な機能ですね。

Q：このCSVファイルに含まれる情報を教えて下さい。

以下回答。十分な精度でファイルの内容について答えてくれています。

このCSVファイルには2016年の米国の気象観測データが含まれており、主な内容は以下の通りです：

• 観測期間
  • 2016年1月3日から2016年3月6日までの約2ヶ月間
• 観測範囲
  • 53の州・地域
  • 306の観測地点（都市）
  • 総データ数：2,999レコード
• 気温データ
  • 平均気温
  • 最高気温
  • 最低気温
  • 観測された平均気温の範囲：-13°F ～ 79°F（約-25℃～26℃）
• 降水量
  • 最大降水量：12.65インチ（約321mm）
• 風のデータ
  • 風向
  • 風速
• 地理情報
  • 観測所の場所（都市名）
  • 観測所コード
  • 州名

このデータは米国の気象局などが収集した冬季から初春にかけての詳細な気象観測記録で、各地点での日々の気象状況を包括的に記録しています。温度、降水量、風向・風速といった基本的な気象要素が含まれており、米国全土の気象状況を把握するための貴重なデータセットとなっています。

めっちゃよい分析ですね。これだけで、含まれているデータについての洞察が得られました。行を削ったために、日付データが、2016年1月3日から2016年3月6日までになっている点もきちんと説明されています。

この時点で、次のプロンプト候補が表示されています。どれも興味深いっすね。こんなのほんとにできるんだろうか。

分析1：平均気温が低い順

思いつくところから、いくらか分析ネタを与えてみます。

Q：平均気温が低い都市を順番に10都市、グラフと共に表示してください。

こんなグラフが出力されました。下から平均気温が低い順になっていますが、期間内の最低気温や最高気温も合わせて表示してくれています。というか、アメリカ寒いな！！

上のグラフですが、裏では、以下のJavaScriptが生成されて表示されていました。自分フロントエンドコードは何もわからんマンですが、React関連がimportされているのは、なんとなくわかります。

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine } from 'recharts';

const data = [
  { name: "Utqiagvik", avgTemp: -18.6, minTemp: -25.6, maxTemp: -8.9 },
  { name: "Northway", avgTemp: -17.2, minTemp: -28.9, maxTemp: -5.0 },
  { name: "Fairbanks", avgTemp: -14.1, minTemp: -23.3, maxTemp: 2.8 },
  { name: "Bettles", avgTemp: -13.9, minTemp: -28.3, maxTemp: 0.0 },
  { name: "Tanana", avgTemp: -12.8, minTemp: -21.1, maxTemp: -1.7 },
  { name: "Gulkana", avgTemp: -12.3, minTemp: -25.6, maxTemp: 3.3 },
  { name: "Mc Grath", avgTemp: -11.8, minTemp: -24.4, maxTemp: 3.9 },
  { name: "Int. Falls", avgTemp: -11.0, minTemp: -26.7, maxTemp: 0.0 },
  { name: "Kotzebue", avgTemp: -10.6, minTemp: -21.7, maxTemp: 0.6 },
  { name: "Craig", avgTemp: -9.6, minTemp: -30.6, maxTemp: 7.8 }
].reverse();  // 上から寒い順に表示するため反転

const TempChart = () => {
  return (
    <div className="w-full p-4">
      <h2 className="text-xl font-bold mb-4 text-center">最も寒い10都市の気温範囲（℃）</h2>
      <div className="w-full h-96">
        <BarChart
          layout="vertical"
          width={800}
          height={400}
          data={data}
          margin={{ top: 20, right: 30, left: 100, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis type="number" 
                 domain={['dataMin - 2', 'dataMax + 2']}
                 tickFormatter={(value) => `${value}°C`} />
          <YAxis dataKey="name" type="category" width={80} />
          <Tooltip 
            formatter={(value) => [`${value}°C`]} 
            labelFormatter={(label) => `都市: ${label}`}
          />
          <Legend />
          <ReferenceLine x={0} stroke="#666" />
          <Bar dataKey="minTemp" fill="#0077be" name="最低気温" />
          <Bar dataKey="avgTemp" fill="#00a86b" name="平均気温" />
          <Bar dataKey="maxTemp" fill="#ff7f50" name="最高気温" />
        </BarChart>
      </div>
    </div>
  );
};

export default TempChart;

グラフはもちろん画像ではないので、マウスホバーで詳細が表示されたり、インタラクティブな表現がその場でできているのが凄い。

分析2：降水量が多い地域のグラフィカル表現

推奨プロンプトが提示されているので、どんどん分析進めてみます。

Q：この気象データセットの中で最も降水量の多い地域を、グラフィカルに表現してください。地域ごとの総降水量や特徴的な気象パターンなどを視覚的に分かりやすく示してください。

こんなグラフが生成されました。地域別、州別で降水量順で表示しています。

もちろんアウトプットはグラフだけじゃなくて、グラフに付随する分析や考察もきっちり出してくれます。

分析結果から、降水量に関する主な特徴は以下の通りです：

最も降水量の多い地域（Top5）

• ケチカン（アラスカ州）

  • 総降水量: 1,114.6mm
  • 降水頻度: 100%
  • 平均気温: 5.1°C
  • 特徴：アラスカ南東部の港町

• クイレイュート（ワシントン州）

  • 総降水量: 794.3mm
  • 降水頻度: 88.9%
  • 平均気温: 7.2°C
  • 特徴：太平洋岸に位置

（中略）

• 太平洋沿岸地域：

  • アラスカ南東部から太平洋岸北西部に集中
  • 高い降水頻度（80-100%）
  • 比較的穏やかな気温
  • 強い風速を記録

• 南東部：

  • アラバマ、フロリダ、ジョージアなどの州で高い平均降水量
  • より温暖な気温
  • 降水の変動性が大きい

• 降水パターンの特徴

  • 太平洋沿岸：安定した継続的な降水
  • 南東部：スポット的な強い降水
  • 気温との関係：寒冷地でも多量の降水がある
  • 風速との関連：沿岸部で強い風速と多量の降水が関連

• 降水量の多い州：

  1. アラバマ州
  2. ワシントン州
  3. フロリダ州
  4. テネシー州
  5. ジョージア州

これらの地域は、主に以下の気候帯に属しています：

• 北太平洋沿岸の温帯海洋性気候
• 南東部の亜熱帯性気候

この期間（2016年1-3月）は、特に太平洋沿岸地域で安定した降水が観測され、アラスカ南東部からワシントン州にかけての地域で特に多量の降水が記録されています。また、南東部の諸州でも比較的多くの降水が観測されており、地域特有の気候パターンが確認できます。

分析3：インタラクティブな気温と降水量の分析

動的にグラフを表示させたいため、シンプルな折れ線グラフに対して、フィルタリングのドロップダウンの作成をお願いしてみます。

Q：まずは、シンプルな平均気温の折れ線グラフを表示してください。そのグラフに降水量を追加お願いします。また、このデータの分析に有用なデータをフィルタリングするためのドロップダウンの追加をお願いできますか？

そうすると、このような折れ線グラフが表示されます。

折れ線グラフの表示だけでは従来のグラフィカルなグラフ表現と大差ないのですが、JavaScript実装されているため、ここのドロップダウンでデータの絞り込みが実現できます。

regionを指定すると、そのregionのStateにドロップダウンが絞り込まれますし、グラフに描画される内容ももちろん、絞り込み結果が反映されると。分析の方法だけではなくグラフ表現までプロンプトで指定できるのが非常に良い。

分析4：高度な分析

推奨プロンプトにこのようなものが出てきたので、試しに依頼してみました。ほんとにこんなのできるんだろうか？

Q：この気象データを使って、気候変動の影響を予測するためのモデルを構築してください。モデルの入力変数、予測手法、予測結果などを視覚的に分かりやすく表現してください。

出てきた結果がこちら。正直、これが気候変動予測モデルなのか？は、なんとなく違う気がしますが、改めて気候データの全体感をまとめつつ、考察がKey Findingsにまとめられていて全体感を整理するのにめちゃくちゃ役立ちます。

分析5：抽象的な質問

データを元に、抽象的な質問をしてみます。

Q：この時期、あなたはどこに住むのがオススメだと考えますか？その理由と共に教えて下さい。

いろいろオススメ教えてくれました。具体的なデータを元にしつつ、それぞれの都市の特徴を交えて話しているのが参考になりますね。

この時期（1月から3月の冬季）の居住地として、気象データを分析しながらおすすめの場所を検討してみましょう。

分析結果に基づいて、この時期（1-3月）におすすめの居住地を3つ挙げさせていただきます：

サンディエゴ（カリフォルニア州）
おすすめ度：★★★★★

• 快適性スコア: 94.7/100（分析対象中最高）
• 気候の特徴：
  • 平均気温: 16.0°C（過ごしやすい温度帯）
  • 降水量: 85.9mm（適度な降水量）
  • 風速: 4.9km/h（穏やかな風）
• おすすめの理由：
  • 年間を通じて安定した温暖な気候
  • 極端な気温変化が少ない
  • 過度な降水がなく、晴れの日が多い
  • 海洋性の影響で湿度も適度

タンパ（フロリダ州）
おすすめ度：★★★★☆

• 快適性スコア: 93.2/100
• 気候の特徴：
  • 平均気温: 16.4°C
  • 降水量: 221.2mm
  • 風速: 9.1km/h
• おすすめの理由：
  • 温暖な気候
  • 海洋性の影響による安定した気温
  • フロリダ州内で最も安定した気候
  • ビーチや自然が近く、アウトドア活動に適している
    （中略）

これらの都市を選んだ総合的な理由：

• 気候の安定性
  • 極端な気温変化が少ない
  • 過度な降水や強風が少ない
  • 快適な温度帯を維持>
• 生活の質
  • アウトドア活動が可能な気候
  • 都市機能の充実
  • 交通の便が良い

ただし、以下の点は考慮が必要です：

• 個人の温度感覚の違い
• 仕事や生活スタイルとの適合性
• 住居費などの経済的要因
• 文化的な好み

これらの都市は、冬季でも比較的穏やかな気候を保ち、屋外活動も可能で、生活の質を維持しやすい環境を提供しています。特にサンディエゴは、気候の安定性と都市機能の充実度のバランスが最も優れており、冬季の居住地として最もおすすめできる都市といえます。

このあたり興味深いのが、内部的には以下のコードが生成され動いていて、居住快適性スコアなるものをインタラクティブに計算して出力している点です。実際に元のファイルからどのようなロジックでこれらの都市がおすすめされているのかをロジックで確認できるのが面白い。

import Papa from 'papaparse';
import _ from 'lodash';

const fileContent = await window.fs.readFile('weather_3000.csv', { encoding: 'utf8' });

const parsedData = Papa.parse(fileContent, {
  header: true,
  dynamicTyping: true,
  skipEmptyLines: true
});

// 各都市の総合的な気象データを分析
const cityAnalysis = _.chain(parsedData.data)
  .groupBy('Station.Location')
  .mapValues(records => ({
    state: records[0]['Station.State'],
    avgTemp: _.meanBy(records, 'Data.Temperature.Avg Temp'),
    avgTempC: ((_.meanBy(records, 'Data.Temperature.Avg Temp') - 32) * 5/9),
    tempVariation: _.maxBy(records, 'Data.Temperature.Max Temp')['Data.Temperature.Max Temp'] - 
                   _.minBy(records, 'Data.Temperature.Min Temp')['Data.Temperature.Min Temp'],
    totalPrecip: _.sumBy(records, r => parseFloat(r['Data.Precipitation']) || 0),
    precipDays: records.filter(r => parseFloat(r['Data.Precipitation']) > 0).length,
    avgWindSpeed: _.meanBy(records, 'Data.Wind.Speed'),
    totalDays: records.length,
    extremeTemp: records.some(r => r['Data.Temperature.Min Temp'] < 0 || r['Data.Temperature.Max Temp'] > 90)
  }))
  .map((data, location) => ({
    location,
    ...data,
    // 居住快適性スコアを計算（0-100）
    comfortScore: Math.min(100, Math.max(0, 
      // 適度な気温（10-25℃）
      (50 - Math.abs(data.avgTempC - 17.5) * 2) +
      // 適度な降水量（過多でも過少でもない）
      (25 - Math.abs(data.totalPrecip - 5) * 0.5) +
      // 穏やかな風（強すぎない）
      (25 - data.avgWindSpeed * 0.5)
    ))
  }))
  .value();

// 快適性スコアで上位の都市を抽出
const topComfortableCities = _.chain(cityAnalysis)
  .filter(city => 
    // 極端な気温変化がない
    city.tempVariation < 40 &&
    // 極端な気温を除外
    !city.extremeTemp &&
    // 過度な降水を除外
    city.totalPrecip < 15
  )
  .orderBy(['comfortScore'], ['desc'])
  .take(10)
  .value();

console.log("居住快適性が高い上位10都市:");
topComfortableCities.forEach((city, index) => {
  console.log(`\n${index + 1}. ${city.location} (${city.state})`);
  console.log(`   快適性スコア: ${city.comfortScore.toFixed(1)}/100`);
  console.log(`   平均気温: ${city.avgTempC.toFixed(1)}°C`);
  console.log(`   気温変動幅: ${city.tempVariation.toFixed(1)}°F`);
  console.log(`   総降水量: ${(city.totalPrecip * 25.4).toFixed(1)}mm`);
  console.log(`   平均風速: ${(city.avgWindSpeed * 1.609344).toFixed(1)}km/h`);
});

// 州ごとの平均快適性スコアを計算
const stateComfort = _.chain(cityAnalysis)
  .groupBy('state')
  .mapValues(cities => ({
    avgScore: _.meanBy(cities, 'comfortScore'),
    cityCount: cities.length,
    bestCity: _.maxBy(cities, 'comfortScore').location
  }))
  .map((data, state) => ({state, ...data}))
  .orderBy(['avgScore'], ['desc'])
  .take(5)
  .value();

console.log("\n快適性が高い上位5州:");
stateComfort.forEach((state, index) => {
  console.log(`${index + 1}. ${state.state}`);
  console.log(`   平均スコア: ${state.avgScore.toFixed(1)}`);
  console.log(`   観測地点数: ${state.cityCount}`);
  console.log(`   最も快適な都市: ${state.bestCity}`);
});

分析ツールで利用できるプロンプト集

上で紹介したYoutubeでは、分析でよく使うであろうプロンプト集がPDFで配布されていました。とりあえず、最初の取っ掛かりではこれみながらあれこれ実行してみるのがオススメです（ダウンロードには、名前とメール・アドレスの入力が必要です）。

https://skillleap.ai/pages/code-interpreter-prompts

以下、上記プロンプト集のサンプルです。

自然言語ベースのBIツールとして十分機能するのでは？と思える水準

データ元は比較にシンプルなものを利用しましたが、分析結果と洞察は非常に的確で、CSVデータの分析体験としては非常に良かったです。生成AI独自の自然言語を軸とした探索的な分析を進めていく感触は、わざわざツールの使い方を覚えてその作法を自分で勉強しながら探索していくのとは違い、直感的で楽でした。

ツールの使い方に依存せず、やりたいことに集中できる感覚です。

実際には、利用できるデータはそれほど大きくないですし、レスポンスにもそれなりの時間がかかるため、すぐには本格的なBIツールの代替にはならないかなと思います。今はそうですが、ゆくゆくはCSV以外のデータセットの対応なども進んだりするなかで、こういった探索的な分析体験も進化していくように感じます。未来が楽しみですね！

それでは、今日はこのへんで。濱田孝治（ハマコー）（@hamako9999）でした。